<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>更新DOM</title>

</head>
<body>
	<div id="test-div">
		<p id="test-js">JavaScript</p>
		<p>Java</p>
	</div>
	<script>
		`use strict`;
		//修改DOM节点的两种方式
		//innerHTML，可以修改DOM节点的文本，还可以修改DOM树的结构
		let p1 = document.getElementById("p1");
		//p1.innerHTML =  'ABC <span style="color:red">RED</span> XYZ';

		//innerText / textContext 可以对字符串进行HTML编码
		//innerText 不返回隐藏元素的文本,textContext返回所有文本
		//p1.innerText = "Hello,World！";

		//修改CSS 可以通过DOM节点的style来设置/获取值
		//css中font-size 属性在javaScript用驼峰代替
		//p1.style.color = '#ff0000';
		//p1.style.fontSize = '20px';
		//p1.style.padding = '2em';

		var testJs = document.getElementById("test-js");
		testJs.innerText = "Hello,World!";
		testJs.style.color = '#ff0000';
		testJs.style.fontWeight = 'bold';
	</script>
</body>
</html>